<template>
  <div style="text-align: center">
    <el-form ref="form" :model="form" label-width="130px">
      <el-row>
        <el-col :span="12" style="width: 100%">
          <el-form-item label="合同编号:" prop="serial">
            <!-- <span class="spanSerial">融立第</span> -->
            <el-input
              v-model="form.serial"
              class="companyInput"
              style="width: 91%; margin-left: -27px"
            >
              <template slot="prepend">融立第</template>
              <template slot="append">号</template>
            </el-input>
            <!-- <p class="company">号</p> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户姓名:" prop="apply">
            <el-input v-model="form.apply"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号码:" prop="card">
            <el-input v-model="form.card"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="tel">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抵押地址:" prop="address">
            <el-input v-model="form.address" style="width: 600px"></el-input>
            <!-- <p class="company">元</p> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="不动产权证号:" prop="non">
            <el-input v-model="form.non" style="width: 600px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form ref="form" :model="form" label-width="130px">
      <el-row>
        <el-col :span="12" style="width: 100%;" >
          <el-form-item label="融资金额:" prop="melt">
            <el-input v-model="form.melt" class="companyInput"></el-input>
            <p class="company">万元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务费用:" prop="retain">
            <el-input v-model="form.retain" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大写:" prop="big">
            <el-input
              v-model="form.big"
              placeholder="如整数,请在后面加元和整"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月付款金额:" prop="due">
            <el-input v-model="form.due" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="width: 46%">
          <el-form-item label="第一次付款时间:" prop="first">
            <el-date-picker
              v-model="form.first"
              type="date"
              placeholder="选择日期"
              style="width: 264px"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保证金:" prop="bond">
            <el-input
              v-model="form.bond"
              class="companyInput"
              placeholder="如无请填写/"
              >/</el-input
            >
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="choiceNo" style="margin-left:-64%;">
            <el-radio-group v-model="form.choiceNo">
              <el-radio :label="1">有</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12"  v-if="isContract==1 ||isContract==2 || isContract==3 || isContract==4">
          <el-form-item label="期数:" prop="rtp">
            <el-input v-model="form.rtp" class="companyInput" ></el-input>
            <p class="company">期</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="width: 150px" @click="downloadFun"
      >下载</el-button
    >

    <div
      style="display: none"
      v-html="VlHtml"
      ref="testref"
      id="indexhtml"
      @click="indexButton($event)"
    ></div>
  </div>
</template>

<script>
import {
  downloadDbAjfService,
  downloadLyfService,
  downloadRydService,
  getOrderTable,
  getRecordModel,
  margin,
  downloadLybService
} from "../../../src/assets/js/api";

export default {
  name: "Agent",
  props: {
    showForm: {
      type: Object,
    },
    isContract: {
      type: Number,
    },
    orderData: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      form: {
        signDate: "", //合同签订日期!
        serial: "", //合同编号!
        apply: "", //申请人!
        tel: "", //手机号码!
        card: "", //身份证号码!
        melt: "", //银行融资金额!
        month: "", //银行月还款!
        cash: "", //保证金!
        retain: "", //担保融资金额!
        big: "", //大写!
        due: "", //保理月还款!
        sum: "", //总月还款!
        address: "", //联系地址!
        first: "", //第一次付款!
        non: "", //不动产权!
        bond: "", //保证金!
        choiceNo: 0, //有无保证金
        rtp:'',//期数
        orderNum:'',//订单号
      },
      VlHtml: "",
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == true) {
        this.echoInfo();
      }
    },
  },
  mounted() {
    this.echoInfo();
  },
  // created() {
  //   this.echoInfo();
  // },
  methods: {
    // 回显信息请求数据!
    async echoInfo() {
      await getRecordModel(this.orderData).then((res) => {
        let obj = [];
        if (res.data.length > 0) {
          res.data.map((item) => {
            obj += item.approveTable;
          });
        }
        this.VlHtml = obj;
      });
      this.$refs["testref"].click();
      margin(this.orderData).then((res) => {
        this.form.cash = res.data; //保证金回显!
        if (res.data ) { //保证金回显!
          this.form.bond =res.data
          this.form.choiceNo = 1;
        } else {
          this.form.bond = "/";
          this.form.choiceNo = 0;
        }
      }),
        getOrderTable(this.orderData).then((res) => {

          this.form.tel = res.data.basicBorrowerPhone; //手机号码回显!
          this.form.card = res.data.basicBorrowerCard; //身份证号码回显!
          this.form.apply = res.data.basicBorrowerName; //申请人回显!
          this.form.retain = res.data.chargeMoney; //担保融资金额回显!
          this.form.due = res.data.monthMoney; //保理月还款回显!
          this.form.big = this.changeNumMoneyToChinese(this.form.retain);
          this.form.melt = res.data.contractGuaranteeMoney; //银行融资金额回显!
          this.form.address = res.data.pledgeHouseAddress; //联系地址回显
          this.form.non = res.data.pledgeHouseNumber; //产权回显
          if(this.isContract==1){
            this.form.rtp='';
          }else {
            this.form.rtp = res.data.contractGuaranteeMonth; //期数

          }
          // this.form.cash = res.data.deposit; //保证金回显!
          this.form.sum = res.data.surplusMoney; //总月还款回显!
          // if (res.data.margin ) {
          //   this.form.bond =res.data.margin
          //   this.form.choiceNo = 1;
          // } else {
          //   this.form.bond = "/";
          //   this.form.choiceNo = 0;
          // }
        });
    },
    indexButton(e) {
      let tagElements = e.target.getElementsByTagName("input");
      for (let i = 0; i < tagElements.length; i++) {
        const element = tagElements[i];
        if (element.getAttribute("name") == "contractBorrowNumber") {
          this.form.serial = element.value;
          break;
        }
      }
    },
    // 下载功能!
    downloadFun() {
      // this.form.serial = `融立第${this.form.serial}`;
      // console.log('res',this.form);
      this.form.orderNum=this.orderData;
      if(this.isContract==1){ //乐业保
        //期数必填
        if(!this.form.rtp){
          this.$message.error('请填写期数')
          return;
        }
        downloadLybService(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "保理签字页");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
      if(this.isContract==2){
        downloadRydService(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "保理签字页");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
      if(this.isContract==3){
        downloadLyfService(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "保理签字页");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
      if(this.isContract==4){
        downloadDbAjfService(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "保理签字页");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
    },
    formResetFields(data) {
      if (data == true) {
        this.form.signDate = "";
        this.form.serial = "";
        this.form.apply = "";
        this.form.tel = "";
        this.form.card = "";
        this.form.melt = "";
        this.form.month = "";
        this.form.cash = "";
        this.form.retain = "";
        this.form.big = "";
        this.form.due = "";
        this.form.sum = "";
      }
    },
    changeNumMoneyToChinese(money) {
      if (!money) {
        return "";
      }
      let cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      let cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      let cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      let cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      let cnInteger = "整"; //整数金额时后面跟的字符
      let cnIntLast = "元"; //整型完以后的单位
      let maxNum = 999999999999999.9999; //最大处理的数字
      let IntegerNum; //金额整数部分
      let DecimalNum; //金额小数部分
      let ChineseStr = ""; //输出的中文金额字符串
      let parts; //分离金额后用的数组，预定义
      let Symbol = ""; //正负值标记
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        //alert('超出最大处理数字');
        return "";
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        return ChineseStr;
      }
      if (money < 0) {
        money = -money;
        Symbol = "负 ";
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = "";
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) {
        //获取整型部分转换
        let zeroCount = 0;
        let IntLen = IntegerNum.length;
        for (let i = 0; i < IntLen; i++) {
          let n = IntegerNum.substr(i, 1);
          let p = IntLen - i - 1;
          let q = p / 4;
          let m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != "") {
        //小数部分
        let decLen = DecimalNum.length;
        for (let i = 0; i < decLen; i++) {
          let n = DecimalNum.substr(i, 1);
          if (n != "0") {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == "") {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (DecimalNum == "") {
        ChineseStr += cnInteger;
      }
      ChineseStr = Symbol + ChineseStr;
      return ChineseStr;
    },
  },
};
</script>

<style scoped type="less">
.el-form
{
    margin-bottom: 28px;  padding: 22px 22px 0 22px;  border: 1px #eee solid;
}
.el-col
{
    display: flex;  flex-wrap: wrap;
}
.company
{
    float: right;  width: 30px;  text-align: center;
}
.companyInput
{
    width: calc(100% - 30px);
}
::v-deep .commpanyItem .el-form-item__content
{
    /* width: 180px; */
    width: 80%;
}

.hetongtd
{
    width: 650px;  height: 40px;  border: 1px #eee solid;
}
.hetongtr
{
    width: 100%;  border: 1px red solid;
}
.hetongInput
{
    width: 100px;  height: 20px !important;  border: 1px rgba(0, 0, 0, 0) solid;
}
.hetongTit
{
    line-height: 40px;  float: left;  width: 30%;  height: 40px;  border-right: 1px #eee solid;
}
.hetongContent
{
    float: left;  width: 65%;  text-align: center;
}
.hetongContent ::v-deep.el-input__inner
{
    height: 35px;  border: 1px rgba(0, 0, 0, 0) solid;
}
table
{
    width: 100%;
}
.el-radio
{
    line-height: 40px;
}













</style>
